<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="connectionConfigurationPageFrom.connectionName" placeholder="连接名称查询" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="connectionConfigurationPageFrom.connectionIp" placeholder="连接IP地址" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="connectionConfigurationPageFrom.connectionDefault" placeholder="是否默认" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in connectionDefaultList" :key="item.key" :label="item.key" :value="item.value" />
      </el-select>
      <el-select v-model="connectionConfigurationPageFrom.connectionType" placeholder="数据库类型" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in connectionConfigurationType" :key="item.connectionMsg" :label="item.connectionMsg" :value="item.connectionType" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="findAll(size,current)">搜索</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="clearfind">重置</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="records"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column fixed prop="connectionId" label="ID" sortable="custom" align="center" width="60" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="connectionName" label="连接名称" min-width="80" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column  label="类型" min-width="80" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
           <span class="link-type" @click="detail(row.connectionId)">{{ row.connectionType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="connectionIp" label="IP地址" min-width="80"  align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
           <span class="link-type" @click="detail(row.connectionId)">{{ row.connectionIp }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="connectionPort" label="端口" min-width="80" align="center" :show-overflow-tooltip='true'>
      <template slot-scope="{row}">
         <span class="link-type" @click="detail(row.connectionId)">{{ row.connectionPort }}</span>
      </template>
      </el-table-column>
      <el-table-column prop="connectionUsername" label="用户名" min-width="80" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="connectionPassword" label="密码" min-width="80" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="connectionDatabase" label="库名" min-width="80" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="118px" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" min-width="118px" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column  label="默认" width="60" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
          <el-tag :type="row.connectionDefault | statusFilter">
            {{ row.connectionDefault }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="70px" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="testCon(scope.row.connectionId)" type="success" size="mini">测试</el-button>
          <el-button @click="detail(scope.row.connectionId)" type="primary" size="mini">编辑</el-button>
          <el-button @click="deleteOne(scope.row.connectionId)" type="danger" size="mini">删除</el-button>
          <el-button v-if="scope.row.status!=1" size="mini" @click="defaltUpdate(scope.row.connectionId)">默认
          </el-button>
<!--          <el-button @click="defaltUpdate(scope.row.connectionId)" type="text" size="mini">默认</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
        :page-sizes="pagesizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import { findAllList, findType,deleteAxios,testConAxios,defaltUpdateAxios} from '@/api/connectionConfiguration'
  export default {
    name: "ConnectionConfiguration",
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: 'success',
          1: 'info'
        }
        return statusMap[status]
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      }
    },
    data() {
      return {
        tableKey:0,
        listLoading: true,
        formLabelWidth: '120px',
        user: {},
        total: 0,
        current: 1,
        size: 10,
        pagesizes: [10, 20, 50, 100],
        connectionConfigurationPageFrom: {},
        records: [],
        connectionConfigurationType: [],
        connectionDefaultList:[
          {"key":"默认","value":1},{"key":"非默认","value":0}
        ]
      }
    },
    methods: {
      //条数变更
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.findAll(val, this.current)
      },
      //页码变更
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.findAll(this.size, val)
      },
      findAll(size, current) {
        this.connectionConfigurationPageFrom.size=size;
        this.connectionConfigurationPageFrom.current=current;
        this.listLoading = true
        findAllList(this.connectionConfigurationPageFrom).then(resp => {
            this.total = resp.data.total;
            this.current = resp.data.current;
            this.size = resp.data.size;
            this.records = resp.data.records;
            for(var i=0;i<this.records.length;i++){
              if(this.records[i].connectionDefault==1){
                this.records[i].connectionDefault="是";
              }else{
                this.records[i].connectionDefault="否";
              }
            }
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
        })
      },
      findAllType() {
        findType().then(resp=>{
          this.connectionConfigurationType=resp.data;
        })
      },
      add(){
        this.$router.push({
          name:"connectionConfigurationFrom",
          query:{isAdd:true}
        })
      },
      deleteOne(connectionId){
        deleteAxios(connectionId).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.findAll(this.size,this.current);
        })
      },
      detail(connectionId){
        this.$router.push({
          name:"connectionConfigurationFrom",
          query:{isAdd:false,connectionId:connectionId}
        })
      },
      clearfind(){
        this.connectionConfigurationPageFrom.connectionType="";
        this.connectionConfigurationPageFrom.connectionName="";
        this.connectionConfigurationPageFrom.connectionIp="";
        this.connectionConfigurationPageFrom.connectionDefault="";
        this.findAll(this.size,this.current);
      },
      testCon(connectionId){
        testConAxios(connectionId).then(resp=>{
          if(resp.code==200){
            this.$message({
                      message: "连接成功",
                      type: 'success'
                    });
          }
        })
      },
      defaltUpdate(connectionId){
        defaltUpdateAxios(connectionId).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.findAll(this.size,this.current);
        })
      },
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      }
    },
    created() {
      this.findAll(10, 1);
      this.findAllType();
    }
  }
</script>

<style>
  .paginationClass {
    position: fixed;
    bottom: 0;
    height: 40px;
    width: 100%;
    text-align: center;
  }
</style>
